<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeTab">
      <a-tab-pane key="1" title="审批规则配置">
        <!-- 顶部 -->
        <div class="page-header">
          <div class="page-title">审批规则配置</div>
          <a-button
            v-if="editMode == false"
            v-permission="'svms:system:general:approval-settings.edit'"
            type="primary"
            @click.stop="editFn"
          >
            编辑
          </a-button>
        </div>

        <!-- 内容 -->
        <div class="content">
          <a-spin :loading="loading" tip="加载中..." style="display: block">
            <SettingForm v-if="editMode" ref="formRef" :settings="settingsDetail" />
            <SettingView v-else :settings="settingsDetail" />
          </a-spin>
        </div>
      </a-tab-pane>
      <a-tab-pane v-if="editMode == false" key="2" title="操作记录">
        <OperateLog type="30" :id="userStore.epId" />
      </a-tab-pane>
    </a-tabs>
  </div>

  <!-- 底部操作 -->
  <page-form-footer cancelText="返回" :cancelFn="cancelFn" :ok-loading="okLoading" @ok="submitFn" v-if="editMode" />
</template>

<script setup name="ApprovalSetings">
  import { onMounted, ref } from 'vue'
  import { getApprovalSetings, updateApprovalSetings } from '@/api/system/approvalSetings'
  import { Message } from '@arco-design/web-vue'
  import SettingForm from './components/setting-form.vue'
  import SettingView from './components/setting-view.vue'
  import useUserStore from '@/store/modules/user'

  const userStore = useUserStore()
  const activeTab = ref('1')
  // 开启编辑
  const editMode = ref(false)
  const editFn = () => {
    editMode.value = true
  }
  const cancelFn = () => {
    editMode.value = false
    getDetail()
  }
  // 详情
  const loading = ref(false)
  const settingsDetail = ref({})
  const getDetail = () => {
    loading.value = true
    getApprovalSetings({ type: 1 })
      .then((res) => {
        loading.value = false
        if (res.code == 200) {
          // 默认无填充1个空值
          let flowList = res.result.flowList || []
          flowList.forEach((item) => {
            item.post = +item.post
          })
          if (flowList.length == 0) {
            flowList = [{ id: undefined, post: undefined }]
          }
          settingsDetail.value = {
            type: 1,
            flowList: flowList,
            ifOpen: res.result.ifOpen,
          }
        }
      })
      .finally(() => {
        loading.value = false
      })
  }

  // 保存
  const formRef = ref()
  const okLoading = ref(false)
  const submitFn = () => {
    const form = formRef.value.form
    // 检验数据
    if (form.ifOpen == 1) {
      for (let index = 0; index < form.flowList.length; index++) {
        const element = form.flowList[index]
        if (!element.post) {
          Message.error('请选择审批人岗位')
          return
        }
      }
    } else {
      form.flowList = form.flowList.filter((item) => item.post)
    }
    // type默认1 支出单审批
    updateApprovalSetings({ ...form, type: 1 }).then((res) => {
      if (res.code == 200) {
        editMode.value = false
        Message.success('保存成功')
        getDetail()
      }
    })
  }

  onMounted(() => {
    getDetail()
  })
</script>

<style scoped lang="less">
  .page-header {
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .page-title {
      font-size: 16px;
      font-weight: bold;
      color: #1d2129;
    }
  }
  .content {
    width: 100%;
    margin-bottom: 40px;
  }
</style>
